<template>
  <div class="xbox">
    <div class="xheader">
      <div class="header-left" @click="toUser">&lt;&nbsp;&nbsp;返回</div>
      <div class="header-right">我的订单</div>
    </div>
    <div class="xcenter">
      <ul>
        <li v-for="(item, index) of tablist" :key="index" :class="{ active: num == index }" @click="getTab(index)">{{ item }}</li>
        <!-- <li>待付款</li>
        <li>待收货</li>
        <li>已完成</li> -->
      </ul>
      <!-- <router-view name="order"></router-view> -->
      <div class="xxcontent">
        <!-- <router-view></router-view> -->
        <div class="nohave" v-if="flag">
          <!-- 没有此类订单 -->
          <h3>您目前还没有此类订单</h3>
          <p>感谢您在锤子商城购物</p>
          <button @click="toHome">返回首页</button>
        </div>
        <div class="have" v-else>
          <!-- {{ list }} -->
          <ul>
            <li v-for="(item, index) of list" :key="index" @click="toDetails(item.orderid, item.status, item.userid)">
              <!-- {{ item }} -->
              <div class="date">
                <p>订单日期<span>{{ item.date }}</span></p>
                <h4>{{ item.status === 0 ? '待付款' : item.status === 1 ? '待收货' : item.status === 2 ? '待评价' : 'bug'}}</h4>
              </div>
              <div class="imglist">
                <div class="img">
                  <img :src="item1.proimg" alt="" v-for="(item1, index1) of item.list" :key="index1">
                </div>
                <div class="button"><i class="iconfont icon-youjiantou"></i></div>
              </div>
              <div class="pay">
                <p>
                  实付金额：<span>￥<i>{{ count[index].toFixed(2) }}</i></span>
                </p>
                <a href="javascript:;" v-if="item.status === 0">现在付款</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
export default {
  data () {
    return {
      num: 0,
      tablist: ['全部', '待付款', '待收货', '完成'],
      status: 0,
      list: [],
      flag: true,
      count: [],
      pay: false
    }
  },
  methods: {
    getTab (index) {
      this.num = index
      this.num === 1 ? this.status = 0 : this.num === 2 ? this.status = 1 : this.num === 3 ? this.status = 2 : this.status = 3
      const userid = localStorage.getItem('userid')
      if (this.status === 3) {
        axios.get('/order?userid=' + userid).then(res => {
          // console.log(res.data)
          // console.log('该用户所有订单', res.data.data)
          this.list = res.data.data
          // res.data.data.map((item) => {
          //   item.list.map((idx) => {
          //     // this.count += idx.num * idx.price
          //     // console.log('my', this.count)
          //     console.log('mycount', idx.num * idx.price)
          //   })
          // })
          this.count = []
          this.list.map((item, index) => {
            let mycount = 0
            item.list.map((idx) => {
              mycount += idx.num * idx.price
            })
            this.count.push(mycount)
            // console.log('count', mycount)
            // console.log('count', this.count)
          })
          this.flag = false
        })
      } else {
        axios.get('/order?userid=' + userid + '&status=' + this.status).then(res => {
          if (res.data.code === '100') {
            // console.log(this.status, '暂无数据')
            this.flag = true
          } else {
            // console.log('111', res.data.data)
            console.log(this.status, res.data.data)
            this.list = res.data.data
            this.count = []
            this.list.map((item, index) => {
              let mycount = 0
              item.list.map((idx) => {
                mycount += idx.num * idx.price
              })
              this.count.push(mycount)
              // console.log('count', mycount)
              // console.log('count', this.count)
            })
            this.flag = false
          }
        })
      }
    },
    toUser () {
      this.$router.push('/user')
    },
    toHome () {
      this.$router.push('/home')
    },
    toDetails (order, sta, user) {
      let itemOrderid = order
      let itemStatus = sta
      let itemUserid = user
      this.$router.push('/details?userid=' + itemUserid + '&orderid=' + itemOrderid + '&status=' + itemStatus)
    }
  },
  created () {
    const userid = localStorage.getItem('userid')
    // let thisStatus = this.$route.query.status ? this.$route.query.status :
    if (this.$route.query.status) {
      this.status = Number(this.$route.query.status)
      // console.log('ss', this.status)
      this.status === 0 ? this.num = 1 : this.status === 1 ? this.num = 2 : this.status === 2 ? this.num = 3 : this.num = 0
      // console.log('ssn', this.num)
      if (this.status === 3) {
        axios.get('/order?userid=' + userid).then(res => {
          // console.log('该用户所有订单', res.data.data)
          this.list = res.data.data
          this.count = []
          this.list.map((item, index) => {
            let mycount = 0
            item.list.map((idx) => {
              mycount += idx.num * idx.price
            })
            this.count.push(mycount)
            // console.log('count', mycount)
            // console.log('count', this.count)
          })
          this.flag = false
        })
      } else {
        axios.get('/order?userid=' + userid + '&status=' + this.status).then(res => {
          if (res.data.code === '100') {
            // console.log(this.status, '暂无数据')
            this.flag = true
          } else {
            // console.log(this.status, res.data.data)
            this.list = res.data.data
            this.count = []
            this.list.map((item, index) => {
              let mycount = 0
              item.list.map((idx) => {
                mycount += idx.num * idx.price
              })
              this.count.push(mycount)
              // console.log('count', mycount)
              // console.log('count', this.count)
            })
            this.flag = false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
html, body, .xbox{
  @include rect(100%, 100%);
}
.xbox {
  .xheader {
    @include rect(100% ,0.5rem);
    @include background-color(black);
    @include flexbox();
    .header-left {
      @include rect(20% ,0.5rem);
      text-align: center;
      color: aliceblue;
      line-height: 0.5rem;
    }
    .header-right {
      @include rect(60% ,0.5rem);
      text-align: center;
      color: white;
      line-height: 0.5rem;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .xcenter {
    @include rect(100%, 100%);
    @include flexbox();
    @include background-color(#efefef);
    @include flex-direction(column);
    @include align-items(center);
    @include justify-content(center);
    // @include overflow(auto);
    >ul {
      @include flexbox();
      @include rect(96%, 0.33rem);
      // background-color: red;
      // margin: 0 auto;
      @include margin(0.1rem auto);
      @include background-color(#eee);

      li {
        @include flex(4);
        @include rect(100%, 100%);
        text-align: center;
        line-height: 0.33rem;
        border: 1px solid #ccc;
        // border-radius: 4px;
        &:nth-child(1) {
          @include border-radius(0.03rem 0 0 0.03rem);
        }
        &:nth-child(4) {
          @include border-radius(0 0.03rem 0.03rem 0);
        }
        &.active {
          @include background-color(#999);
          @include color(#fff);
        }
      }
    }
    .xxcontent {
      @include flex();
      @include rect(100%, 100%);
      @include overflow(auto);
      .nohave {
        @include rect(100%, 100%);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(center);
        @include align-items(center);
        h3 {
          @include color(rgba(0,0,0,.15));
          @include font-size(0.18rem);
          @include margin(-1rem 0 0.05rem);
        }
        p {
          @include color(rgba(0,0,0,.15));
          @include font-size(0.14rem);
          @include margin(0 0 0.1rem);
        }
        button {
          @include rect(1.42rem, 0.42rem);
          @include color(rgba(0,0,0,.6));
          @include font-size(0.16rem);
        }
      }
      .have {
        @include rect(100%, 100%);
        // @include overflow(auto);
        ul {
          @include rect(100%, 100%);
          @include padding(0 0 1rem);
          @include overflow(auto);
        }
        li {
          @include rect(100%, auto);
          @include background-color(#fff);
          @include margin(0.1rem 0 0);
          .date {
            @include rect(100%, 0.5rem);
            @include padding(0 0.1rem);
            border-bottom: 0.01rem solid #ccc;
            @include flexbox();
            @include justify-content(space-between);
            @include align-items(center);
            p {
              @include font-size(0.14rem);
              span {
                @include font-size(0.18rem);
                @include color(#000);
                @include font-weight(500);
                @include margin(0 0.1rem 0);
              }
            }
            h4 {
              @include font-size(0.18rem);
              @include color(#f00);
              @include margin(-0.05rem 0 0);
            }
          }
          .imglist {
            @include flexbox();
            @include rect(100%, 1.5rem);
            @include padding(0 0.1rem);
            border-bottom: 0.01rem solid #ccc;
            .img {
              @include rect(90%, 100%);
              @include flexbox();
              @include flex-wrap(nowrap);
              @include align-items(center);
              @include overflow(auto);
              img {
                @include rect(auto, 1.2rem);
              }
            }
            .button {
              @include rect(10%, 100%);
              @include flexbox();
              @include align-items(center);
              @include justify-content(space-between);
            }
          }
          .pay {
            @include rect(100%, 0.5rem);
            @include padding(0 0.1rem);
            @include flexbox();
            @include justify-content(space-between);
            @include align-items(center);
            p {
              @include font-size(0.14rem);
              span {
                // @include font-size(0.18rem);
                @include color(#f00);
                @include font-weight(600);
                // @include margin(0 0.1rem 0);
                i {
                  @include font-size(0.18rem);
                }
              }
            }
            a {
              // @include circle(0.5rem 0.3rem, 3%);
              @include background-color(blue);
              @include color(#fff);
              @include padding(0.05rem 0.1rem);
              @include border-radius(0.03rem);
            }
          }
        }
      }
    }
  }
}
</style>
